<template>
    <div>
        <el-table :data="tableData" row-key="id">
            <el-table-column prop="title" label="实验室">
                <template #default="scope">
                    <el-link type="primary" @click="handleLocation(scope.row)">{{ scope.row.title }}</el-link>
                </template>
            </el-table-column>

            <el-table-column prop="title" label="所属学院">
                <template #default="scope">
                    <el-tag :color="CollegesColorType[scope.row.collegeType]">{{ college_method(scope.row.collegeType)
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="实验室类型">
                <template #default="scope">
                    <el-tag :color="LabColorType[scope.row.labType]">{{ labType_method(scope.row.labType) }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="capacity" label="容纳人数"></el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button round type="primary" @click="handleUpdate(scope.row)">更新</el-button>
                    <el-popconfirm title="您确定要删除么?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button round type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="实验室位置" :fullscreen="true" v-if="dialogVisible">
            <LabMap :x="currentItem.x" :y="currentItem.y" :t="currentItem.title"></LabMap>
        </el-dialog>

        <el-dialog v-model="dialogUpdateVisible" title="更新实验室">
            <el-form ref="updateFormRef" :model="updateForm" :rules="rules" class="demo-ruleForm" status-icon>
                <el-form-item label="实验室名称" prop="title">
                    <el-input v-model="updateForm.title" />
                </el-form-item>
                <el-form-item label="容纳人数" prop="capacity">
                    <el-input v-model.number="updateForm.capacity" type="number" />
                </el-form-item>

                <el-form-item label="实验室类型" prop="labType">
                    <el-select v-model="updateForm.labType" class="m-2" placeholder="请选择实验室类型" size="large">
                        <el-option v-for="item in LabType" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="学院" prop="collegeType">
                    <el-select v-model="updateForm.collegeType" class="m-2" placeholder="请选择学院" size="large">
                        <el-option v-for="item in CollegeType" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <div class="dialog-footer">
                    <el-button @click="dialogUpdateVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleUpdateConfirm()">
                        确定
                    </el-button>
                </div>
            </el-form>
        </el-dialog>

    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';
import { LabType, CollegeType, LabColorType, CollegesColorType } from '../../util/type'
import LabMap from '../../components/lab-manage/LabMap.vue'
import { ElMessage } from 'element-plus'
const tableData = ref([])
onMounted(() => {
    getList()
})

const getList = async () => {
    var res = await axios.get('/adminapi/lab')
    tableData.value = res.data
}

const college_method = (value) => {
    var obj = CollegeType.find(item => item.value === value)
    return obj.label
}

const labType_method = (value) => {
    var obj = LabType.find(item => item.value === value)
    return obj.label
}

/**
 * 预览功能
 */
const currentItem = ref({})
const dialogVisible = ref(false);
const handleLocation = (item) => {
    dialogVisible.value = true;
    currentItem.value = item;
}

// 更新
const dialogUpdateVisible = ref(false)
const updateFormRef = ref()
const updateForm = reactive({
    title: "",
    capacity: "",
    labType: "",
    collegeType: "",
})
const rules = reactive({
    title: [
        { required: true, message: '请输入实验室名称', trigger: 'blur' },
    ],
    capacity: [
        { required: true, message: '请输入容纳人数', trigger: 'blur' },
    ],
    labType: [
        { required: true, message: '请选择实验室类型', trigger: 'blur' },
    ],
    collegeType: [
        { required: true, message: '请选择学院', trigger: 'blur' },
    ],
})

const handleUpdate = (item) => {
    dialogUpdateVisible.value = true;

    updateForm.title = item.title;
    updateForm.capacity = item.capacity;
    updateForm.labType = item.labType;
    updateForm.collegeType = item.collegeType

    currentItem.value = item;
}

const handleUpdateConfirm = () => {
    updateFormRef.value.validate(async (valid) => {
        if (valid) {
            var res = await axios.put(`/adminapi/lab/${currentItem.value.id}`, updateForm)
            if (res.data.code === 0) {
                ElMessage({
                    message: '执行成功',
                    type: 'success',
                })
                await getList();
            } else {
                ElMessage.error(res.data.msg)
            }
            dialogUpdateVisible.value = false;
        } else {
            console.log(valid)
        }
    })
}

const handleDelete = async (item) => {
    var res = await axios.delete(`/adminapi/lab/${item.id}`)
    if (res.data.code === 0) {
        ElMessage({
            message: '执行成功',
            type: 'success',
        })
        await getList();
    } else {
        ElMessage.error(res.data.msg)
    }
}

</script>
<style lang="scss" scoped>
.el-tag {
    --el-tag-text-color: white;
}
</style>